<template>
  <div
    style="border-radius: 4px;overflow: auto; width: 100%; height: 99vh;"
    :infinite-scroll-disabled="false"
    :infinite-scroll-distance="10"
  >
    <a-list :data-source="directions" header="解决途径">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <v-card hover
                class="rounded-xl"
                style="margin: 0 10px; width: 500px; padding: 10px; "
                :style="{backgroundColor: item.type}">
          <v-card-title style="font-family: '华文楷体',sans-serif;
                               font-size: 16px;
                               padding: 0 0 0 8px">
            <span>对于功能/部件&nbsp;</span><span style="font-weight: bolder">"{{ item.id }}"</span>
            <v-spacer/>
            <v-btn
              rounded
              :color="colors[index]"
              @click="select(index)"
            >
              {{ states[index] }}
            </v-btn>
          </v-card-title>
          <v-card-text>
            <v-list flat :style="{backgroundColor: item.type}">
              <v-list-item-group
                color="#965454"
              >
                <v-container
                  v-if="item.clashMessage !== ''"
                  style="height: auto; color: #965454">
                  <v-icon style="color: #965454">mdi-car-brake-low-pressure</v-icon>
                  <span class="ZZGF-font-bold" style="margin-left: 10px">{{ item.clashMessage }} </span>
                </v-container>

                <v-subheader class="ZZGF-font">
                  找到一种方法，满足以下条件：
                </v-subheader>
                <v-list-item
                  disabled
                  style="height: auto; color: #2C2E2D"
                  v-for="(suggest, i) in item.suggestion"
                  :key="i">
                  <v-icon style="margin-left: 10px">mdi-lightbulb-multiple-outline</v-icon>
                  <span class="ZZGF-font-bold" style="margin-left: 5px">{{suggest}}</span>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-card-text>
        </v-card>
      </a-list-item>

    </a-list>
  </div>
</template>
<script>
  import request from "../utils/request";
  export default {
    props: {
      focus: {
        type: Function,
        default: null
      },
      directions: {
        type: Array,
        default: null
      }
    },

    data() {
      return {
        colors: [],
        selected: [],
        states:[],
        loading: false,
      };
    },
    activated() {
      // this.selected = []
      // this.colors = new Array(this.directions.length).fill('#FFFAF4')
      // this.states = new Array(this.directions.length).fill('选择解决途径')
    },
    created() {
      this.selected = []
      this.colors = new Array(this.directions.length).fill('#FFFAF4')
      this.states = new Array(this.directions.length).fill('选择解决途径')
    },
    methods: {
      handleClick(){
        // this.focus()
      },
      loadDirection(){
        this.colors = new Array(this.directions.length).fill('#FFFAF4')
        this.states = new Array(this.directions.length).fill('选择解决途径')
      },
      select(index){
        if (this.states[index] === '选择解决途径')
        {
          this.selected.push(index)
          this.$set(this.colors, index, '#c1cbd7')
          this.$set(this.states, index, '已选择')
          this.$emit("select", this.selected)
        }
        else{
          for (let i = 0; i < this.selected.length; i++){
            if (this.selected[i] === index)
              this.selected.splice(i, 1)
          }
          this.$set(this.colors, index, '#FFFAF4')
          this.$set(this.states, index, '选择解决途径')
          this.$emit("select", this.selected)
        }
      },
    },
  };
</script>
<style>
  .ant-list-split{
     border-bottom: 0 !important;
  }
  .ant-list-item{
    border-bottom: 0 !important;
  }
  .ant-list-header{
    font-family: '华文楷体',sans-serif;
    font-weight: bolder;
    font-size: 18px;
    color: #89B8CA;
    text-align: center;
  }
  .ant-list-items{
    padding-left: 0 !important;
  }

</style>
